<template>
    <div>
        <h2 class="f35 pr">
            <i class="el-icon-arrow-left f40 pa" style="left:20rem"  @click="back"></i>
            个人信息
        </h2>
        <ul class="top">
           <li>头像 
             <p @click="tophone(0)">
              <!-- <img src="../../assets/img/mine-img/mine-mine.png" style="border-radius: 50%;">  -->
              <img src="../../assets/img/avatar.png"> 
              <img src="../../assets/img/mine-img/smallright.png">
            </p>
           </li>
           <li>姓名 <span>{{userInfo.username}}</span></li>
           <li >电话 <span @click="tophone(1)">{{userInfo.tel}}</span></li>
        </ul>
    </div>
</template>
<script>
export default {
   data() {
      return {
        userInfo:{}
      }
   },
   created(){
    this.userInfo = this.$route.params.userInfo;
   },
   computed:{
   },
   methods:{
    back(){
        this.$router.back()
    },
    tophone(i){
        this.$router.push({
            path:"/phoneinfo",
            query:{
                num:i
            }
        }
            
            )
    }
   },
}
</script>
<style scoped>
h2 {
    text-align: center;
    font-size: 36rem;
    font-weight: normal;
    width: 100%;
    height: 430rem;
    background-color: rgb(46, 128, 249);
    padding-top: 70rem;
    color: white;

}
p >img:nth-child(1){
    width: 92rem;
    height: 92rem;
    vertical-align: -5rem;
    margin-right: 10rem;
}
p >img:nth-child(2){
    width: 13rem;
    height: 26rem;
    vertical-align: 20rem;
    margin-right: 20rem;
}
.top {
    width: 710rem;
    height: 365rem;
    position: relative;
    top: -320rem;
    left: 20rem;
    box-sizing: border-box;
    font-size: 25rem;
    border-radius: 25rem;
    background-color: #fff;
    padding: 20rem 30rem;
    font-size: 26rem;
}
.top li{
    display: flex;
    height:100rem;
    justify-content: space-between;
    align-items: center;
}
</style>

